<template>
  <el-card>
    <el-row>
      <el-col :span="8">
        <h4 class="mb-20px">报名设置</h4>
        <el-form :model="form" label-width="auto">
          <el-form-item label="栏目：" prop="column">
            <el-input :modelValue="form.column" disabled />
          </el-form-item>
          <el-form-item label="所属分类：" prop="class">
            <div>
              <div class="flex items-center">
                <el-button type="primary" @click="form.class.push('')">新增</el-button>
                <span class="ml-10px text-red-500">*需至少保留一个</span>
              </div>
              <div v-for="(_, index) in form.class" :key="index" class="flex items-center mt-10px">
                <el-input
                  v-model="form.class[index]"
                  class="mr-10px !w-240px"
                  placeholder="请输入分类名称"
                />
                <Icon
                  class="color-red-500 cursor-pointer"
                  icon="ep:delete-filled"
                  @click="
                    () => {
                      if (form.class.length > 1) {
                        form.class.splice(index, 1)
                      }
                    }
                  "
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="报名字段：" prop="fields">
            <div>
              <div class="flex items-center">
                <el-button
                  type="primary"
                  @click="form.fields.push({ content: '', sort: form.fields.length + 1 })"
                  >新增</el-button
                >
              </div>
              <div v-for="(i, index) in form.fields" :key="index" class="flex items-center mt-10px">
                <el-input
                  v-model="i['content']"
                  class="mr-10px !w-240px"
                  placeholder="请输入分类名称"
                  :disabled="['公司', '参会人姓名'].includes(i['content'])"
                />
                <el-input
                  v-model="i['sort']"
                  class="mr-10px !w-90px"
                  placeholder="排序"
                  type="number"
                  min="1"
                />
                <Icon
                  v-if="!['公司', '参会人姓名'].includes(i['content'])"
                  class="color-red-500 cursor-pointer"
                  icon="ep:delete-filled"
                  @click="
                    () => {
                      if (form.fields.length > 1) {
                        form.fields.splice(index, 1)
                      }
                    }
                  "
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="
                () => {
                  $router.back()
                  delVisitedView(route)
                }
              "
              >取消</el-button
            >
            <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { ColumnTypeApi, ColumnType } from '@/api/biz/columntype'
import { useTagsViewStore } from '@/store/modules/tagsView'

const { delVisitedView } = useTagsViewStore()
const route = useRoute()
const router = useRouter()

const id = +useRoute().params.id
const message = useMessage()

const form = reactive({
  column: undefined,
  class: [''],
  fields: [
    {
      content: '公司',
      sort: 1
    },
    {
      content: '参会人姓名',
      sort: 2
    }
  ]
})
const detail = ref<ColumnType>()
ColumnTypeApi.getColumnType(id).then((data) => {
  detail.value = data
  form.column = data.columns
  form.class = data.category?.split(',') || ['']
  form.fields = data.registrationFields?.split(',')?.map((i, index) => {
    return {
      content: i,
      sort: index + 1
    }
  }) || [
    {
      content: '公司',
      sort: 1
    },
    {
      content: '参会人姓名',
      sort: 2
    }
  ]
})

const loading = ref(false)
const submit = () => {
  if (form.class.some((i) => !i)) {
    return message.warning('分类不能为空')
  }
  loading.value = true
  ColumnTypeApi.updateColumnType({
    ...detail.value,
    id,
    category: form.class.join(','),
    registrationFields: form.fields
      .sort((i, j) => i.sort - j.sort)
      .map((i) => i.content)
      .toString()
  })
    .then(() => {
      message.success('修改成功')
      router.back()
      delVisitedView(route)
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
